<template>
	<view class="bg-light" style="min-height: 650px;">
		<tabsTop tabName="订单详情"></tabsTop>
		<view class="t_status pb-3 pt-2">
			<!-- 状态头部 -->
			<view class="bg-white flex p-2">
				<view v-if="order.Row_Status == '0'">
					<uni-icons fontFamily='iconfont' color="#dcdddf" size="20">{{'\ue617'}}</uni-icons>
				</view>
				<view v-else-if="order.Row_Status == '1'">
					<uni-icons fontFamily='iconfont' color="#dcdddf" size="20">{{'\ue600'}}</uni-icons>
				</view>
				<view v-else-if="order.Row_Status == '2'">
					<uni-icons fontFamily='iconfont' color="#dcdddf" size="20">{{'\ue75c'}}</uni-icons>
				</view>
				<view class="ml-2">
					<view style="font-size: 14px;">{{getRowStatus(order.Row_Status)}}</view>
					<view v-if="order.Row_Status=='1'" style="font-size: 12px;">{{order.Refund_Date}}</view>
					<view v-else-if="order.Row_Status=='0'" class="flex" style="font-size: 10px;">你已发起退款申请，商家将在<view style="color: #eb0443;">7天
						</view>内退款</view>
					<view v-else style="font-size: 10px;">商家拒绝退款</view>
				</view>
			</view>
			<!-- 进度/说明 -->
			<view>
				<!-- 退款成功 -->
				<view class="bg-white mt-2" v-if="order.Row_Status=='1'">
					<!-- 退款金额 -->
					<view class="flex justify-between align-center p-2" style="font-size: 12px;border-bottom: 1px solid #f5f6f8;">
						<view>退款金额：</view>
						<view>￥{{order.Refund_Amount}}</view>
					</view>
					<view class="p-2" style="font-size: 10px;">
						<uni-steps :options="list1" :active="calculateActive(order.Row_Status)" />
						<view class="flex justify-between align-center">
							<view style="font-size: 10px;">{{order.Submit_Date}}</view>
							<view style="font-size: 10px;">{{order.Refund_Date}}</view>
						</view>
					</view>
				</view>
				<!-- 退款进行中 -->
				<view v-else class="container bg-white" style="border-top: 1px solid #f5f6f8;">
					<view class="panel" v-for="(item, index) in panels" :key="index">
						<view class="panel-content" v-show="item.expanded">
							<ul style="list-style-type: disc; padding-left: 20px;">
								<li v-for="(textItem, textIndex) in item.content" :key="textIndex"
									style="font-size: 12px;">{{ textItem }}</li>
							</ul>
						</view>
						<view class="panel-header" @click="togglePanel(index)">
							<!-- {{ item.title }} -->
							<text style="font-size: 12px;" v-if="!item.expanded">更多说明<uni-icons type="down" size="15"></uni-icons></text>
							<text style="font-size: 12px;border-top: 1px solid #f5f6f8;" v-if="item.expanded">收起<uni-icons type="up" size="15"></uni-icons></text>
						</view>
					</view>
				</view>
			</view>
			<!-- 退款信息 -->
			<view class="bg-white p-1">
				<view class="p-1" style="font-size: 14px;">退款信息</view>
				<view>
					<!-- 商品信息 -->
					<view class="flex bg-light p-1">
						<image :src="Domain_IMG+order.Picture_URL" style="width: 80px;height: 80px;"></image>
						<view class="ml-1" style="font-size: 13px;">{{order.Article_Name}}</view>
					</view>
					<!-- 退款金额/方式/原因 -->
					<view class="mt-1" style="border-bottom: 1px solid #f5f6f8;">
						<view class="p-1" style="font-size: 12px;">退款金额：￥{{order.Refund_Amount}}(含运费￥0.00)</view>
						<view class="p-1" style="font-size: 12px;">售后方式：{{(order.Refund_Message+"").replaceAll('"','')}}</view>
						<view class="p-1" style="font-size: 12px;">退款原因：{{(order.Refund_Cause+"").replaceAll('"','')}}</view>
					</view>
					<!-- 编号/申请时间 -->
					<view>
						<view class="p-1" style="font-size: 12px;">售后编号：{{order.Refund_SerialNumber}}</view>
						<view class="p-1" style="font-size: 12px;">申请时间：{{order.Submit_Date}}</view>
						<view class="p-1" style="font-size: 12px;">数量：{{order.Quantity}}</view>
					</view>
				</view>
			</view>
			<view class="btn-group fixed-bottom flex justify-end bg-white align-center">
				<view class="but m-1" @click="goOrder()">查看订单</view>
				<view class="but m-1" @click="quash()">撤销申请</view>
			</view>
		</view>
	</view>

</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import {
		getRefundDetails,getQuash
	} from "@/api/orders.js"
	export default {
		components: {
			tabsTop, //顶部标题组件
		},
		data() {
			return {
				order: {},
				list1: [{
					title: '商家同意退款'
				}, {
					title: '退款到账'
				}],
				panels: [{
					// title: '更多说明', // 添加面板标题
					content: [
						'如果商家同意，申请将达成并退款给你',
						'如果商家拒绝，你可以修改退款申请或申请客服介入',
						'如果特殊情况下退款申请失败，请联系商家处理'
					],
					expanded: false
				}],
				Domain_IMG1: "/static/icon",
				Domain_IMG: app.globalData.Domain_IMG,
				Domain_ICON: app.globalData.Domain_ICON,
				Collection_SerialNumber: '',
				Sales_Order_SerialNumber: '',
			}
		},
		onLoad(options) {
			console.log(options.Sales_Order_Detail_SerialNumber);
			this.Sales_Order_SerialNumber = options.Sales_Order_SerialNumber;
			this.Collection_SerialNumber = options.Collection_SerialNumber;
			this.getData(options.Sales_Order_Detail_SerialNumber);
		},
		methods: {
			togglePanel(index) {
				this.panels[index].expanded = !this.panels[index].expanded;
			},
			getRowStatus(status) {
				switch (status) {
					case '00':
						return "退款申请待商家处理";
					case '1':
						return "退款成功";
					case '2':
						return "商家拒绝退款";
					default:
						return "";
				}
			},
			// getIconPath(status) {
			// 	switch (status) {
			// 		case '0':
			// 			return this.Domain_IMG1 + '/pendingPay.png';
			// 		case '1':
			// 			return this.Domain_IMG1 + '/paid.png';
			// 		case '2':
			// 			return this.Domain_ICON + '/transaction_close.png';
			// 		default:
			// 			return "";
			// 	}
			// },
			calculateActive(status) {
				if (status == 0) {
					return 1;
				} else if (status == 1) {
					return 2;
				} else {
					return 0; // default active value
				}
			},
			async getData(data) {
				const res = await getRefundDetails({
					Sales_Order_SerialNumber: data,
					Open_ID: app.globalData.Open_ID
				})
				if (res.Status == "success") {
					this.order = res.Data[0]
				}
			},
			async quash(){
				this.loading = true;
				const res = await getQuash({
					Sales_Order_SerialNumber: this.Sales_Order_SerialNumber,
					Cause: this.order.Cause,
					Open_ID: app.globalData.Open_ID,
				})
				if (res.Status == "success") {
					uni.showToast({
						title: '撤销成功！',
						icon: 'success'
					})
					uni.navigateTo({
						url: `/pages/my/orders`
					});
				}else {
					uni.showToast({
						title: '撤销失败！',
						icon: 'error'
					})
				}
				this.loading = false;
			},
			goOrder(){
				uni.navigateTo({
					url: '/pages/my/orders'
				});
			}
		}
	}
</script>

<style>
	.panel {
		margin-bottom: 10px;
	}

	.panel-header {
		padding: 10px;
		cursor: pointer;
		text-align: center;
		font-size: 13px;
	}

	.panel-content {
		padding: 10px;
	}
	
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		height: 50px;
		box-shadow: 2px 2px 4px rgb(0 0 0);
	}
	.but {
		width: 65px;
		font-size: 10px;
		padding: 0;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 14px;
		border: 1px solid #d3d4d6;
		background-color: white;
	}
</style>